<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form" action="">

    <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search="" id="name" >
            <option  value="" >请选择员工</option>
            <option  value=""
                     th:each="date ,dateState:${staffs}"
                     th:value="${date.name}"
                     th:text="${date.name}">
            </option>
        </select>
    </div>


    <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search="" id="department" >
            <option  value="" >请选择部门</option>
            <option  value=""
                 th:each="date ,dateState:${departments}"
                 th:value="${date.name}"
                 th:text="${date.name}">
            </option>
        </select>
    </div>

    <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search="" id="post" >
            <option  value="" >请选择职务</option>
            <option  value=""
                     th:each="date ,dateState:${posts}"
                     th:value="${date.name}"
                     th:text="${date.name}">
            </option>
        </select>
    </div>
    <button class="layui-btn" id="searchBtn">搜索</button>
    <button class="layui-btn" type="reset" id="reset">重置</button>


</form>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">

</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
</script>


<script src="/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script th:inline="javascript">
    layui.use(['table','jquery'], function(){
        var table = layui.table;
        var $ = layui.jquery
        table.render({
            id:'tableAll'
            ,elem: '#test'
            ,url:'/personal/toData'
            //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '员工信息表'
            ,where : {
                name :'',
                department : '',
                post : ''
            }
            ,cols: [
                [
                {field:'jobNumber', title:'工号',  unresize: true, sort: true}
                ,{field:'name', title:'姓名', edit: 'text'}
                ,{field:'sex', title:'性别',  edit: 'text', sort: true}
                ,{field:'phone', title:'联系电话'}
                ,{field:'postName', title:'职务',  sort: true}
                ,{field:'departmentName', title:'部门',sort: true}
                ,{field:'createTime', title:'入职时间',templet:'<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd") }}</div>'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]
            ]
            ,page: true
        });
        //条件查询
        $('#searchBtn').on('click', function() {
            table.reload('tableAll', {
                where : {
                    name : $('#name').val(),
                    department : $('#department').val(),
                    post : $('#post').val()
                },
                page : {
                    curr : 1
                }
            });
            return false;
        });
        //重置
        $('#reset').on('click', function() {
            window.location.reload();
            table.reload('tableAll', {
                where : {
                    name : "",
                    department : "",
                    post : ""
                },
                page : {
                    curr : 1
                }
            });
            return false;
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                parent.layer.open({
                    title:'员工详情',
                    type:2,
                    content:'/personal/persondetail?id='+data.id,
                    area: ['1200px', '600px'],

                    shade: [0.3, '#393D49'],
                    shadeClose:false,
                    moveOut:true,
                })
            }
        });
    });
</script>


</body>
</html>